<template>
  <div>
    <el-form :inline="true">
      <el-form-item label="发生时间">
        <el-date-picker
          v-model="startDt"
          type="date"
          placeholder="选择日期"
        />
        <span>至</span>
        <el-date-picker
          v-model="endDt"
          type="date"
          placeholder="选择日期"
        />
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="getData">查询</el-button>
    </el-form>
    <lb-table
      ref="lbTable"
      border
      highlight-current-row
      element-loading-text="加载中"
      :column="tableData.column"
      :data="tableData.data"
      pagination
      :total="tableData.total"
      @fetch="getData"
    />
  </div>
</template>

<script>
  import { colorObjMap } from '@/utils/map'
  import { formatColumnMap } from '@/utils'
  import { parseTime } from '@/utils'
  import { customerScoreRecord, queryMap } from '@/api'

  export default {
    name: 'tab-score',
    props: ['csmId'],
    data() {
      return {
        startDt: '',
        endDt: '',
        statusMap: [{ 'value': 1, 'desc': '购买', 'key': 'GET' }, { 'value': 2, 'desc': '兑换', 'key': 'EXCHANGE_MINUS' }, { 'value': 3, 'desc': '获赠', 'key': 'MERGE_GET' }, { 'value': 4, 'desc': '赠出', 'key': 'MERGE_MINUS' }, { 'value': 5, 'desc': '冲正(+)', 'key': 'CORRECT_ADD' }, { 'value': 6, 'desc': '冲正(-)', 'key': 'CORRECT_MINUS' }, { 'value': 7, 'desc': '退货', 'key': 'RECYCLE_MINUS' }, { 'value': 8, 'desc': '退货', 'key': 'RECYCLE_ADD' }, { 'value': 9, 'desc': '订单退单', 'key': 'GIVEUP_BILL_ADD' }, { 'value': 10, 'desc': '作废订单', 'key': 'CANCEL_BILL_ADD' }, { 'value': 11, 'desc': '取消订单', 'key': 'STOP_BILL_ADD' }],
        tableData: {
          column: [
            { label: '订单号', prop: 'orderCode', width: 100, align: 'center' },
            { label: '商品描述', prop: 'remark', width: '', align: 'left' },
            { label: '发生时间', prop: 'createTime', width: 180, align: 'center',
              render: (h, { row }) => <span>{ row.createTime && parseTime(row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }</span>
            },
            { label: '应收金额', prop: 'treceivables', width: 80, align: 'right', hidden: false },
            { label: '实收金额', prop: 'taccReceivable', width: 80, align: 'right', hidden: false },
            { label: '积分类型', prop: 'dtype', width: 100, align: 'center',
              render: (h, { row }) => <span style={colorObjMap[row.dtype]}>{ formatColumnMap(this.statusMap, 'value', row.dtype, 'desc') }</span>
            },
            { label: '积分', prop: 'score', width: 100, align: 'center',
              render: (h, { row }) => <span style={colorObjMap[row.dtype]}>{ row.score }</span>
            }

          ],
          data: []
        }
      }
    },
    async created() {
      const res = await queryMap({ enumName: 'OrderFlag' })
      this.statusMap = res.data
    },
    methods: {
      async getData({ currentPage = 1, pageSize = 20 }) {
        const params = {
          currentPage,
          pageSize,
          csmId: String(this.csmId),
          'startDt': this.startDt,
          'endDt': this.endDt
        }
        const res = await customerScoreRecord(params)
        this.tableData.data = res.data.rows
        if (currentPage === 1) this.tableData.total = res.data.total
      }
    }
  }
</script>

<style scoped>

</style>
